<template>
  <div class="RiskLevel-wrap">
    <div
      v-if="riskList.vulLevel != undefined"
      class="risk-box"
      :class="[
        riskList.vulLevel === 0 ? 'unknown' : '',
        riskList.vulLevel === 1 ? 'low' : '',
        riskList.vulLevel === 2 ? 'medium' : '',
        riskList.vulLevel === 3 ? 'high' : '',
        riskList.vulLevel === 4 ? 'critical' : '',
      ]"
    >
      {{ riskLevel[riskList.vulLevel] }}
    </div>
    <p v-if="riskList.vulType" class="line"></p>
    <div v-if="riskList.vulType" class="vul-type">
      <el-tooltip
        effect="dark"
        :content="`漏洞类型：${riskList.vulType}`"
        placement="bottom"
      >
        <span>{{ riskList.vulType }}</span>
      </el-tooltip>
    </div>
  </div>
</template>


<script lang="ts" setup>
import { computed, defineProps, onMounted, reactive, ref } from 'vue';

const props = defineProps({
  riskList: {
    type: Object,
    default: () => {
      return {};
    },
  },
  publicFlag: {
    type: Number,
    default: () => {
      return 0;
    },
  },
  showRisk: {
    type: Boolean,
    default: true,
  },
});
// 暴露风险 0-信息;1-低危;2-中危;3-高危;4-超危
const riskLevel = reactive({
  0: '信息',
  1: '低危',
  2: '中危',
  3: '高危',
  4: '超危',
});

const showLine = computed(() => {
  return true;
});
</script>
<style lang="scss" scoped>
.RiskLevel-wrap {
  display: flex;
  align-items: center;
  // margin-left: 28px;
  .risk-box {
    width: 48px;
    height: 23px;
    border-radius: 4px;
    background: #8590b3;
    font-family: PingFangSC-Medium;
    font-size: 12px;
    color: $-white;
    text-align: center;
    line-height: 23px;

    &.low {
      background: $-v-color-primary;
    }
    &.medium {
      background: #ffc244;
    }
    &.high {
      background: #ff931d;
    }
    &.critical {
      background: #d8421a;
    }
    &.unknown {
      background: #8590b3;
    }
  }

  .line {
    width: 0px;
    height: 14.5px;
    margin: 0px 15px;
    opacity: 1;
    border: 1px solid rgba(255, 255, 255, 0.2);
  }

  .vul-type {
    // width: 48px;
    height: 23px;
    padding: 0px 12px;
    border-radius: 4px;
    background: rgba(149, 129, 255, 0.12);
    font-family: PingFangSC-Medium;
    font-size: 12px;
    color: #9581ff;
    text-align: center;
    // line-height: 23px;
    border: 1px solid rgba(149, 129, 255, 0.5);
    display: flex;
    align-items: center;

    span {
      max-width: 82px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis; //文本超出时显示省略号
    }
  }
}
</style>
